<template>
  <view class="projectSelect-container">
    <customtop top_title="选择项目归属"></customtop>
    <view class="category-container">
      <template v-for="(item, index) in categoryList">
        <view class="item">
          <view class="left">
            <u-radio-group v-model="radioValue" @change="radioChange">
              <u-radio :name="item.id"></u-radio>
            </u-radio-group>
          </view>
          <view class="right">
            <view class="title">{{ item.name }}</view>
          </view>
        </view>
      </template>
    </view>
    <bottomBtn @submit="submit"></bottomBtn>
  </view>
</template>

<script>
import customtop from "@/components/customtop.vue";
import { request } from "@/utils/http.js";
import bottomBtn from "@/components/bottomBtn.vue";
export default {
  components: {
    customtop,
    bottomBtn,
  },
  data() {
    return {
      categoryList: [],
      radioValue: "",
      name: "",
    };
  },
  onLoad(options) {
    this.getCategoryList();
  },
  methods: {
    radioChange(e) {
      this.categoryList.forEach((item) => {
        if (item.id === e) {
          this.name = item.name;
        }
      });
    },
    getCategoryList() {
      request.post("/xiangmushe/getCategoryList").then(({ data }) => {
        this.categoryList = data.data;
      });
    },
    submit() {
      const pages = getCurrentPages();
      const perver = pages[pages.length - 2];
      perver.$vm.form.category_id = this.radioValue;
      perver.$vm.category_name = this.name;
      uni.navigateBack({
        detail: 1,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  // background-color: #fff;
  height: 100%;
}

.projectSelect-container {
  padding: 20rpx;
  box-sizing: border-box;
}

.category-container {
  .item {
    margin-top: 20rpx;
    background-color: #f2f3f7;
    padding: 40rpx 20rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-radius: 10rpx;

    .right {
      margin-left: 10rpx;

      .title {
        font-size: 26rpx;
      }
    }
  }
}
</style>
<style>
page {
  background: #fff;
}
</style>
